<template>
  <div class="large-screen">
    <mapScene ref="mapSceneRef"></mapScene>
    <div class="large-screen-wrap" id="large-screen">
      <!-- 头部模块 -->
      <header class="header">
        <div class="titleText">盐城城投集团投资大屏</div>
      </header>
      <!-- 左侧 -->
      <div class="leftContent">
        <div class="line_block">
          <div class="linBlockText"><dv-decoration7>资产概况</dv-decoration7></div>
          <LeftView1 />
        </div>
        <div class="line_block">
          <div class="linBlockText"><dv-decoration7>收益分析</dv-decoration7></div>
          <LeftView2 />
        </div>
        <div class="line_block">
          <div class="linBlockText"><dv-decoration7>月度收益分析</dv-decoration7></div>
          <LeftView3 />
        </div>
      </div>
      <div class="rightContent">
        <div class="line_block">
          <div class="linBlockText"><dv-decoration7>出租面积</dv-decoration7></div>
          <RightView1 />
        </div>
        <div class="line_block">
          <div class="linBlockText"><dv-decoration7>平均租金</dv-decoration7></div>
          <RightView2 />
        </div>
        <div class="line_block">
          <div class="linBlockText"><dv-decoration7>安全检查</dv-decoration7></div>
          <RightView3 />
        </div>
      </div>
       <!-- 雷达 -->
      <div class="bottom-radar">
        <dv-decoration-12 style="width:100px;height:100px;" />
      </div>
       <!-- loading动画 -->
    <div class="loading">
      <div class="loading-text">
        <span style="--index: 1">L</span>
        <span style="--index: 2">O</span>
        <span style="--index: 3">A</span>
        <span style="--index: 4">D</span>
        <span style="--index: 5">I</span>
        <span style="--index: 6">N</span>
        <span style="--index: 7">G</span>
      </div>
      <div class="loading-progress">
        <span class="value">{{ state.progress }}</span>
        <span class="unit">%</span>
      </div>
    </div>
    </div>
  </div>
</template>

<script setup>
import {shallowRef, ref, reactive, onMounted, onBeforeUnmount} from 'vue'
import mapScene from './map.vue'
import {Assets} from './assets.js'
import emitter from '@/utils/emitter'
import gsap from 'gsap'
import LeftView1 from './modules/LeftView1/leftView1.vue'
import LeftView2 from './modules/LeftView2/LeftView2.vue'
import LeftView3 from './modules/LeftView3/LeftView3.vue'
import RightView1 from './modules/rightView1/rightView1.vue'
import RightView2 from './modules/rightView2/rightView2.vue'
import RightView3 from './modules/rightView3/rightView3.vue'
import autofit from 'autofit.js'

const assets = shallowRef(null)
const mapSceneRef = ref(null)
const state = reactive({
  // 进度
  progress: 0,
})
onMounted(() => {
  // 监听地图播放完成，执行事件
  emitter.$on('mapPlayComplete', handleMapPlayComplete)
  // 自动适配
  assets.value = autofit.init({
    dh: 1080,
    dw: 1920,
    el: '#large-screen',
    resize: true,
  })
  // 初始化资源
  initAssets(async () => {
    // 加载地图
    emitter.$emit('loadMap', assets.value)
    // 隐藏loading
    await hideLoading()
    // 播放场景
    mapSceneRef.value.play()
  })
})
onBeforeUnmount(() => {
  emitter.$off('mapPlayComplete', handleMapPlayComplete)
})
// 初始化加载资源
function initAssets(onLoadCallback) {
  assets.value = new Assets()
  // 资源加载进度
  let params = {
    progress: 0,
  }
  assets.value.instance.on('onProgress', (path, itemsLoaded, itemsTotal) => {
    let p = Math.floor((itemsLoaded / itemsTotal) * 100)
    gsap.to(params, {
      progress: p,
      onUpdate: () => {
        state.progress = Math.floor(params.progress)
      },
    })
  })
  // 资源加载完成
  assets.value.instance.on('onLoad', () => {
    onLoadCallback && onLoadCallback()
  })
}

// 隐藏loading
async function hideLoading() {
  return new Promise((resolve, reject) => {
    let tl = gsap.timeline()
    tl.to('.loading-text span', {
      y: '200%',
      opacity: 0,
      ease: 'power4.inOut',
      duration: 2,
      stagger: 0.2,
    })
    tl.to('.loading-progress', {opacity: 0, ease: 'power4.inOut', duration: 2}, '<')
    tl.to(
      '.loading',
      {
        opacity: 0,
        ease: 'power4.inOut',
        onComplete: () => {
          resolve()
        },
      },
      '-=1'
    )
  })
}

function handleMenuSelect(index) {
  state.activeIndex = index
}
// 地图开始动画播放完成
function handleMapPlayComplete() {
  let tl = gsap.timeline({paused: false})
  let leftCards = gsap.utils.toArray('.left-card')
  let rightCards = gsap.utils.toArray('.right-card')
  let countCards = gsap.utils.toArray('.count-card')
  tl.addLabel('start', 0.5)
  tl.addLabel('menu', 0.5)
  tl.addLabel('card', 1)
  tl.addLabel('countCard', 3)
  tl.to('.m-header', {y: 0, opacity: 1, duration: 1.5, ease: 'power4.out'}, 'start')
  tl.to('.bottom-tray', {y: 0, opacity: 1, duration: 1.5, ease: 'power4.out'}, 'start')
  tl.to(
    '.top-menu',
    {
      y: 0,
      opacity: 1,
      duration: 1.5,
      ease: 'power4.out',
    },
    '-=1'
  )
  // tl.to('.bottom-radar', {y: 0, opacity: 1, duration: 1.5, ease: 'power4.out'}, '-=2')
  tl.to(leftCards, {x: 0, opacity: 1, stagger: 0.2, duration: 1.5, ease: 'power4.out'}, 'card')
  tl.to(rightCards, {x: 0, opacity: 1, stagger: 0.2, duration: 1.5, ease: 'power4.out'}, 'card')
  tl.to(
    countCards,
    {
      y: 0,
      opacity: 1,
      stagger: 0.2,
      duration: 1.5,
      ease: 'power4.out',
    },
    'card'
  )
}
</script>

<style lang="scss" scoped>
@import "~@/assets/style/home.scss";
.linBlockText {
  line-height: 30px;
  height: 30px;
  width: 30%;
  color: #75fbfd;
  font-size: 20px;
}
.header {
  position: relative;
  left: 0;
  top: 0;
  right: 0;
  width: 100%;
  height: 90px;
  z-index: 2;
  display: flex;
  justify-content: center;
  background-image: url(@/assets/images/header-bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  .titleText {
    font-size: 36px;
    font-weight: bold;
    color: #75fbfd;
  }
}
.leftContent,
.rightContent {
  position: absolute;
  height: calc(100% - 100px);
  z-index: 999999;
  width: 27%;
  .line_block {
    height: 33%;
  }
}
.leftContent {
  top: 70;
  left: 20px;
}
.rightContent {
  top: 70;
  right: 20px;
}
:deep(.dv-decoration-7) {
  justify-content: left !important;
}
.bottom-radar {
  position: absolute;
  bottom: 50px;
  left: 60%;
}
</style>
